/**
 * 问卷调查
 * @author zhangiang
 * @date   2016/10/26
 */

import PullRefresh from '../components/mui/PullRefresh.js';
import NoData from '../components/NoData.js';

(function (lf, r) {

    var ajax = lf.utils.ajax,
        fmt = 'yyyy-MM-dd',
        doAction = lf.bridgeJs.doAction,
        getUrlParam = lf.utils.getUrlParam,
        houseNum = '',
        RC = r.createClass;

    const ALL = 'all',
        MONTH = 'month',
        WEEK = 'week',
        MARK = 'mark';
    let range = lf.utils.getUrlParam('flag', location.search);

    let Header = r.createClass({
        getInitialState: function () {
            return {
                headers: [
                    {
                        title: '全部',
                        range: ALL,
                    },
                    {
                        title: '我参与的',
                        range: MONTH
                    },

                ],
                counts: [],
                userId:'',
            }
        },

        componentWillMount: function(){
        },
        componentDidMount: function () {
            let $links = $('.header a'),
                me = this;

            if (!$links.length) return;
            //默认第一个点中
            $links.eq(0).addClass('active');
            //点击
            $links.each(function () {
                $(this).on('tap', function () {
                    //切换样式,
                    $(this).addClass('active')
                        .siblings().removeClass('active');

                    var range = $(this).data('range');

                    console.log(range)
                    me.props.getList(range);//rgnge判断分页 1为默认page 这里需要修

                }.bind(this));

            });
        },
        render: function () {
            //var max=this.props.maxCount;
            let me = this;
            let headers = this.state.headers.map(function (data, i) {
                return (
                    <a key={'head-'+i} data-range={data.range} className="item" href="javascript:;">
                        <p>{/*max[i]*/}</p>
                        <p className="bold">{data.title}</p>
                        <div className="rectangle"></div>
                    </a>
                );
            });
            let addClass = '';

            return (

                <div className={"header "+ addClass}>
                    <div className="item-row">
                        {headers}
                    </div>
                    <div className="split-line"></div>
                </div>

            )
        },
    });


    var System = RC({
        componentDidMount: function () {
            var toDetail = r.findDOMNode(this.refs.system);
            var me = this;
            var data = me.props.data,
                user = me.props.user,
                userId = data.userId,
                businessType = data.businessType,
                businessId = data.businessId;
               var feeNoticeDetailId = getUrlParam('feeNoticeDetailId', data.pageUrl);
            r.findDOMNode(this.refs.system).addEventListener('tap', function () {
                 if(this.props.data.status == '未参与'){
                     doAction('property-list-details.html?questionnaireId='+this.props.data.questionnaireId, '问卷调查');
                 }else if(this.props.data.status == '已过期'){
                     doAction('property-list-details.html?questionnaireId='+this.props.data.questionnaireId+'&type='+'end', '问卷调查');
                 }else if(this.props.data.status == '已参与'){
                     doAction('property-list-details.html?questionnaireId='+this.props.data.questionnaireId+'&type='+'add', '问卷调查');
                 }
            }.bind(this));
        },
        render: function () {
            var data = this.props.data,
                end = lf.utils.format(data.endDate, fmt),
                startDate = lf.utils.format(data.startDate, fmt);
            var tips = '',
                nev = '';
            if (data.status == '已过期'||data.status == '已参与') {
                tips = 'gray';
            } else if (data.status == '未参与') {
                tips = 'detail';
                nev = 'NEW';
            }
            return (
                <div className='content system-content' ref="system" onTouchEnd={this.clickFn}>
                    <p className=" text-dot"> {data.title}<a href="javascript:;" className="new">{nev}</a> <a href="javascript:;" className={tips}>{data.status}</a></p>
                      <p className='lf sys'>
                           {startDate} 至 {end}
                      </p>
                </div>
            )
        }
    });

    var Body = RC({
        getInitialState: function () {
            return ({
                list: [],
                user: [],
                itemList: [],
            })
        },
        componentDidMount(){
            this.getList();
        },
        getList: function (Fn) {
           var user = this.props.user;
            var me = this,
                typeAdd;

            if(Fn == 'all'){//全部
                typeAdd = 2;
            }else if(Fn =='month'){//我参与的
                typeAdd = 1;
            }else{
                typeAdd = 2;
            }
            ajax({
                type: 'get',
                data: {
                    houseId: user.houseId,
                },
                success: function (data) {
                    houseNum = data.data.buildingId;
                    ajax({
                        type: 'post',
                        data: {
                            projectId: user.projectId,
                            buildingId: houseNum,
                            userId: user.userId,
                            type:typeAdd,
                        },
                        success: function (data) {
                            let itemList =  data.dataList;
                            var list = !itemList.length ?<NoData data={{span_text:'还没有内容哦~'}}/> :itemList.map(function (data) {
                                return (
                                    <System key={data.id} data={data} user={user}/>
                                )
                            });
                            me.setState({list: list});

                        }.bind(me)
                    }, lf.finger.api.survey.listQuestionnaires);
                }.bind(me)
            }, lf.finger.api.household.getHouseInfo);
        },


        render: function () {
            return (
                <div className="property-msg">
                    <Header maxCount={this.state.maxCount} getList={this.getList} user={this.state.user} counts={this.state.headerCounts}/>
                    <div className="page" ref="defaultPage">
                        {this.state.list}
                    </div>
                </div>
            );
        }
    });

    lf.bridgeJs.getUser(function (user) {
        lf.appJs.refresh();
        r.render(
            <Body user={user}/>,
            document.getElementById('root'), function () {

            }
        )
})
})(liefeng, React)
